Radix primitive based Drawer component #2445

martinxu9 · 2024-01-24T17:23:07Z

All Submissions:

Have you followed the guidelines stated in CONTRIBUTING.md file?
Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

New Feature Submission:

Does your submission pass the tests?
Have you linted your code locally prior to submission?

Changes To Core Features:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your core changes, as applicable?
Have you successfully ran tests with your changes locally?

After these steps, you're ready to open a pull request.

Component based on Vaul: https://github.com/emilkowalski/vaul
Style based on https://ui.shadcn.com/docs/components/drawer (apply_theme does not work)
Example: https://drawer-demo.staging.reflexcorp.run/

rdxt.flex(
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer with snap points"), as_child=True),
        rdxp.drawer_overlay(),
        rdxp.drawer_portal(
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content"),
                    rdxp.drawer_description("Drawer description"),
                    rdxp.drawer_close(
                        rdxt.button("Close Button"),
                        as_child=True,
                    ),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    rdxt.text("more content, drag me up"),
                    direction="column",
                    margin="5em",
                    align_items="center",
                ),
                top="auto",
                height="100%",
                flex_direction="column",
                background_color="var(--green-3)",
            ),
        ),
        snap_points=["148px", "355px", 1],
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 1 from bottom"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content 1"),
                    rdxp.drawer_description("Drawer description 1"),
                    rdxp.drawer_close(
                        rdxt.button("Close 1"),
                        as_child=True,
                    ),
                    direction="column",
                    gap="2",
                    align_items="center",
                ),
                top="auto",
                height="auto",
                flex_direction="column",
                background_color="var(--blue-3)",
            ),
        ),
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 2 from top"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content 2"),
                    rdxp.drawer_description("Drawer description 2"),
                    rdxp.drawer_close(
                        rdxt.button("Close 2"),
                        as_child=True,
                    ),
                    direction="column",
                    gap="2",
                    align_items="center",
                ),
                bottom="auto",
                height="auto",
                flex_direction="column",
                background_color="var(--red-3)",
                margin_bottom="6rem",
            ),
        ),
        direction="top",
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 3 from left"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rx.vstack(
                    rdxp.drawer_title("Drawer Content 3"),
                    rdxp.drawer_description("Drawer description 3"),
                    rdxp.drawer_close("Close 3"),
                    align_items="end",
                ),
                width="auto",
                right="auto",
                flex_direction="column",
                background_color="var(--red-3)",
            ),
        ),
        direction="left",
    ),
    rdxp.drawer_root(
        rdxp.drawer_trigger(rdxt.button("Open Drawer 4 from right"), as_child=True),
        rdxp.drawer_portal(
            rdxp.drawer_overlay(),
            rdxp.drawer_content(
                rdxt.flex(
                    rdxp.drawer_title("Drawer Content 4"),
                    rdxp.drawer_description("Drawer description 4"),
                    rdxp.drawer_close(
                        rdxt.button("Close 4"),
                        as_child=True,
                    ),
                    align_items="start",
                    direction="column",
                ),
                width="auto",
                left="auto",
                flex_direction="column",
                background_color="var(--yellow-3)",
            ),
        ),
        direction="right",
    ),
    gap="2",
    direction="column",
    spacing="1.5em",
    font_size="2em",
    padding_top="10%",
)

picklelo

Functionality seems to work, need to improve the default styling - ideally we shouldn't have to set margin/padding props in the usage level

picklelo · 2024-01-25T01:50:05Z

reflex/components/radix/primitives/drawer.py

+            The dictionary of the component style as value and the style notation as key.
+        """
+        base_style = {
+            "left": "0",


Should we be setting all of these? Then it will stretch to the full width of the page I believe

A variation of that if not that precisely. Basically trying to replicate the shadcn UI implementation, their drawer is basically this drawer component plus this. From the look of it, their drawer is always coming up from bottom. Without these style below, the drawer will be just a dialogue flying in from a certain direction (not sure if that should still be called drawer).

<DrawerPrimitive.Content ref={ref} className={cn( "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className )} {...props} >

picklelo · 2024-01-25T01:50:41Z

reflex/components/radix/primitives/drawer.py

+        base_style.update(style)
+        self.style.update(
+            {
+                "css": base_style,


Why do you have to put it in the css tag? I think we automatically handle this now.

I must've been misinformed. Can you point me to an example how the latest way to do this?

picklelo

works well for me

martinxu9 changed the title ~~Radix primitive based Drawer component [WIP]~~ Radix primitive based Drawer component Jan 24, 2024

martinxu9 requested a review from Alek99 January 24, 2024 19:53

martinxu9 marked this pull request as ready for review January 24, 2024 19:53

picklelo reviewed Jan 25, 2024

View reviewed changes

martinxu9 added 7 commits January 25, 2024 22:53

functional, style not working

cc96e8d

pyi

1d115a9

fix style

2259ffb

pyi

e88540b

use Type anno

695d300

pyi

563bdec

remove defaults, clean up type ano

ce2f9d6

martinxu9 force-pushed the martinxu9/drawer-component branch from 61bbd7b to ce2f9d6 Compare January 26, 2024 06:53

martinxu9 added 2 commits January 25, 2024 22:53

pyi

95ec4a3

| -> Union

cfe07cb

picklelo approved these changes Jan 29, 2024

View reviewed changes

martinxu9 merged commit 0378b2a into main Jan 30, 2024
40 of 45 checks passed

martinxu9 deleted the martinxu9/drawer-component branch January 30, 2024 04:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Radix primitive based Drawer component #2445

Radix primitive based Drawer component #2445

martinxu9 commented Jan 24, 2024 •

edited

Loading

picklelo left a comment

picklelo Jan 25, 2024

martinxu9 Jan 25, 2024

picklelo Jan 25, 2024

martinxu9 Jan 25, 2024

picklelo left a comment

Radix primitive based Drawer component #2445

Radix primitive based Drawer component #2445

Conversation

martinxu9 commented Jan 24, 2024 • edited Loading

All Submissions:

Type of change

New Feature Submission:

Changes To Core Features:

After these steps, you're ready to open a pull request.

picklelo left a comment

Choose a reason for hiding this comment

picklelo Jan 25, 2024

Choose a reason for hiding this comment

martinxu9 Jan 25, 2024

Choose a reason for hiding this comment

picklelo Jan 25, 2024

Choose a reason for hiding this comment

martinxu9 Jan 25, 2024

Choose a reason for hiding this comment

picklelo left a comment

Choose a reason for hiding this comment

martinxu9 commented Jan 24, 2024 •

edited

Loading